<template>
  <div class="app-container home">
    <div class="demo-image__placeholder">
      <div class="block">
        <span class="demonstration"></span>
        <el-image
          style="width: 1500px; height: 300px"
          :src="src">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2><i class="el-icon-s-goods"></i>FRIDAY</h2>
      </el-col>
    </el-row>

    <template>
      <div class="block">
        <span class="demonstration">欢迎来到FRIDAY网上书店</span>
          <el-carousel :interval="2000" type="card" :height="carouselHeight + 'px'">
          <el-carousel-item v-for="(item,index) in images" :key="index">
<!--            <h3 class="small">{{ item }}</h3>-->
<!--            <img :src="item" alt="">-->
            <img
              ref="images"
              :src="require('@/assets/images/' + item)"
              class="img"
              @load="resize()"
            >
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
    <h2>书店简介</h2>
    <h3>星期五网上书店是以网站作为交易平台，将图书的基本信息通过网站发布到 Web 上，用户可以通过该网站浏览商品的信息，并决定是否购买，以实现书籍的在线订购业务及购买。
      星期五网上书店管理系统的开发任务是实现传统书店与电子商务的有机结合，使整个系统符合操作简便，拥有界面友好、灵活、实用、安全等特点。
    </h3>


    <el-container>
      <el-header id="recommend"><i class="el-icon-trophy"></i>编辑推荐</el-header>
      <el-main><template>
        <img :src="ui">
        <el-link
          style="width: 500px; margin-top: -100px"
          type="primary" align="center">《云边有个小卖部》¥32.3</el-link><br>
        <el-link
          style="width: 500px; margin-top: -100px"
          type="primary" align="center">如果你有时间打开，那请给我一个机会，陪伴你度过安静的阅读时光。</el-link>
      </template></el-main>
    </el-container>

    <div>
      <span
        style="width: 50px; height: 30px; font-size: 50px" align="center"
      >热卖书籍</span>
      <el-divider></el-divider>
    </div>

    <div>
      <el-row>
        <el-col :span="8"><div class="test"><img :src="src1" height="500px" width="500px"></div></el-col>
        <el-col :span="8"><div class="test"><img :src="src2" height="500px" width="500px"></div></el-col>
        <el-col :span="8"><div class="test"><img :src="src3" height="500px" width="500px"></div></el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col :span="8"><div class="test"><img :src="src4" height="500px" width="500px"></div></el-col>
        <el-col :span="8"><div class="test"><img :src="src5" height="500px" width="500px"></div></el-col>
        <el-col :span="8"><div class="test"><img :src="src6" height="500px" width="500px"></div></el-col>
      </el-row>
    </div>
  </div>
</template>


<style scoped lang="scss">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }
  #recommend{
    font-size: 25px;
    font-style: initial;
    font-weight:bold;

  }
  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>


<script>
    export default {
        data() {
            return {
                src: 'https://wx1.sinaimg.cn/mw690/005SXcCcly1h23q9kmf8vj33aj1uo1kx.jpg',
                  // 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                input1: '',
                input2: '',
                input3: '',
                input4: '',
                ui: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-8c06b6f065299904e7fe41bc6796c342_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658051687&t=c1d9392d898b6fb74585f4be07fbbc6c',
                src1:'http://t13.baidu.com/it/u=1886475209,2586858300&fm=224&app=112&f=JPEG?w=500&h=500',
                src2:'https://img14.360buyimg.com/pop/jfs/t1/7092/5/1029/375576/5bcd4b44E2cd23872/36437300a1098763.jpg',
                src3:'https://img14.360buyimg.com/n1/s546x546_jfs/t1/219002/37/8045/166201/61bbebafEd37dae36/5592e7646a49c341.jpg',
                /*'https://img14.360buyimg.com/n1/s546x546_jfs/t1/219002/37/8045/166201/61bbebafEd37dae36/5592e7646a49c341.jpg.avif',*/
                /*'https://img14.360buyimg.com/n1/s546x546_jfs/t1/219002/37/8045/166201/61bbebafEd37dae36/5592e7646a49c341.jpg.avif',*/
                /*'https://img14.360buyimg.com/n1/s546x546_jfs/t1/219002/37/8045/166201/61bbebafEd37dae36/5592e7646a49c341.jpg.avif',*/
                src4:'http://t13.baidu.com/it/u=3785626630,454566032&fm=224&app=112&f=JPEG?w=430&h=430',
                src5:'http://t13.baidu.com/it/u=1692490878,3758707678&fm=224&app=112&f=JPEG?w=500&h=500',
                src6:'http://t15.baidu.com/it/u=2025230404,3912976687&fm=224&app=112&f=JPEG?w=500&h=500',
              images : ['111.jpg','222.jpg','333.jpg','444.jpg'],
              imageHeight: 355,
              carouselHeight: 355
            }
        },
      mounted() {
        // 窗口大小发生改变时,调用一次
        window.onresize = () => {
          this.resize()
        }
      },
      methods: {
        resize() {
          // 监听屏幕视口大小如果'resize',发生改变了，就获取图片的高度height，然后渲染到页面
          this.$nextTick(() => {
            this.carouselHeight = this.$refs.images[0].height
          })
        }
      }
    }
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 80px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>


